<template>
	<div class="My">
		<div class="header">
			<div class="header-logo"><img src="../assets/images/home/20210324130942.png" /></div>
		</div>
		<div class="biaoq">
			<van-tabs v-model="active" color="#303030" title-active-color="#303030" title-inactive-color="#999999">
				<van-tab title="全部">
					<div @click="orderDetaile(item.no)" v-for="(item,index) in orderArr" :key="index">
						<van-swipe-cell>

							<van-card :price="item.total" class="goods-card" :thumb="item.image">
								<div slot='title' class="titles">{{item.headerTis}}</div>
								<div slot='desc' style="color: #999999;">规格：{{item.skuId}}
									<div class="numShul">x{{item.number}}</div>
								</div>
								<div slot='num' class="numBtn">
									<van-button type="primary" size="mini" color="#343434" round>立即付款</van-button>
								</div>

							</van-card>
							<template #right>
								<van-button square text="删除" type="danger" class="delete-button" @click="delorder(item.id)" />
							</template>
						</van-swipe-cell>
					</div>
				</van-tab>
				<van-tab title="代付款">代付款</van-tab>
				<van-tab title="待完成">待完成</van-tab>
				<van-tab title="已完成">已完成</van-tab>
				<!-- <van-tab title="已完成">已完成</van-tab> -->
				<van-tab title="我的评价">
					<van-swipe-cell v-for="(item,index) in pingjieArr" :key="index">
						<!-- https://img01.yzcdn.cn/vant/cat.jpeg -->
						<van-card class="goods-card" :thumb="item.img">
							<div slot="title">
								<van-rate v-model="item.stars" :size="20" color="#343434" void-icon="star" void-color="#eee" readonly />
							</div>
							<div slot="desc" class="desc">
								{{item.content}}
							</div>
						</van-card>
						<template #right>
							<van-button square text="删除" type="danger" class="delete-button" @click="delpl(item.id,index)" />
							<van-button square type="primary" text="修改" class="delete-button" @click="xiugai(item.id)" />
						</template>
					</van-swipe-cell>
				</van-tab>
			</van-tabs>
		</div>
		<!-- 修改评价弹窗 -->
		<van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
			<div class="pingjbxo">
				<div class="header-ms"> 描述相符：
					<van-rate v-model="value" :size="20" color="#343434" void-icon="star" void-color="#eee" />
				</div>
				<div class="jianj">
					<van-field v-model="message" rows="2" autosize label="评价" type="textarea" maxlength="50" placeholder="请输入评价"
					 show-word-limit />
				</div>
				<van-uploader v-model="fileList" multiple />
			</div>

			<van-button type="primary" block color="#343434" class="kuijiBtn" @click="fabiao">修改评论</van-button>
		</van-popup>
		<!-- 底部导航 -->
		<tab-bar>
			<tab-bar-item path="/home">
				<img src="../assets/images/tabbar/home.png" slot="item-icon" />
				<img src="../assets/images/tabbar/home_selected.png" slot="item-select-icon" />
				<div slot="item-text">首页</div>
			</tab-bar-item>
			<tab-bar-item path="/about">
				<img src="../assets/images/tabbar/index.png" slot="item-icon" />
				<img src="../assets/images/tabbar/index_selected.png" slot="item-select-icon" />
				<div slot="item-text">购物车</div>
			</tab-bar-item>

			<tab-bar-item path="/order">
				<img src="../assets/images/tabbar/order.png" slot="item-icon" />
				<img src="../assets/images/tabbar/order_selected.png" slot="item-select-icon" />
				<div slot="item-text">订单</div>
			</tab-bar-item>

			<tab-bar-item path="/my">
				<img src="../assets/images/tabbar/my.png" slot="item-icon" />
				<img src="../assets/images/tabbar/my_selected.png" slot="item-select-icon" />
				<div slot="item-text">我的</div>
			</tab-bar-item>
		</tab-bar>
	</div>
</template>
<script>
	import {
		Tab,
		Tabs
	} from 'vant';
	import {
		Panel
	} from 'vant';
	import {
		Button,
		SwipeCell,
		Cell,
		CellGroup,
		Card,
		Dialog,
		Rate,
		Popup,
		Field,
		Uploader,
		Toast
	} from 'vant';
	// 引入tabbar组件
	import TabBar from '../components/tabbar/TabBar.vue'
	import TabBarItem from '../components/tabbar/TabBarItem.vue'
	export default {
		data() {
			return {
				active: 0,
				value: 0,
				pingjieArr: [],
				delID: '',
				show: false,
				message: '',
				xgId: '',
				fileList: [],
				orderArr: [],
				proImg: '',
				rsId: '',
			    kArr:[],
				img:[]


			}
		},
		created() {
			// 请求所有的订单数据
			this.$get(this.$API.ORDERS_LIST, {
				userId: this.$store.state.nameId.userid,
			}).then(res => {
				console.log(res)

				//遍历所有的订单数据后，请求订单详情数据
			
				for (let i = 0; i < res.data.length; i++) {

					// console.log(res.data[i])
					// 查询订单详情
					this.$get(this.$API.ORDERS_INFO, {
						userId: this.$store.state.nameId.userid,
						orderNo: res.data[i].no
					}).then(rest => {
						// console.log(rest.data.items[0].product_sku_id)
						// 请求商品详情数据
						this.$get(this.$API.PRODUCTS_INFO, {
							productId: rest.data.items[0].product_id,
							userId: this.$store.state.nameId.userid,
						}).then(resc => {
							console.log(resc.data.skus)
							let headerTis = '';
							let image = '';
							let skuId = ''
							// 遍历商品详情的商品id跟订单详情的商品id是否相等
							for (let j = 0; j < resc.data.product.length; j++) {
								if (resc.data.product[j].id == rest.data.items[0].product_id) {
									headerTis = resc.data.product[j].title
									image = resc.data.product[j].image
								}
								// 遍历商品详情的skuid与订单的skuid是否相等
								for (let k = 0; k < resc.data.skus.length; k++) {
									if (resc.data.skus[k].id == rest.data.items[0].product_sku_id) {
										skuId = resc.data.skus[k].title
									}
								}
							}
							this.orderArr.push({
								no: rest.data.order[0].no,
								total: rest.data.order[0].total_amount,
								number: rest.data.items[0].number,
								image: image,
								headerTis: headerTis,
								skuId: skuId,
								id:res.data[i].id
							})

						})

					}).catch(err => {
						console.log(err)
					})
				}


			}).catch(err => {
				console.log(err)
			})
			console.log(this.orderArr)
			this.getpingjie()
		},
		methods: {
			// 删除订单
			delorder(id) {
				Dialog.confirm({
				  title: '删除订单',
				  message: '确定删除订单吗？',
				})
				  .then(() => {
				    this.$get(this.$API.ORDERS_LIST, {
				    	userId: this.$store.state.nameId.userid,
				    
				    }).then(res => {
				    	for(let i=0;i<res.data.length;i++){
				    		console.log(i)
				    		if(res.data[i].id==id){
				    		this.$get(this.$API.ORDERS_DEL,{
				    		 	userId: this.$store.state.nameId.userid,
				    		    orderId:id
				    		}).then(res=>{
				    		 Toast.success({ duration: 700,message:"删除成功" });
							  this.$router.go(0)
				    		})	
				    		}
				    	}
				    })
				  })
				  .catch(() => {
				    console.log('取消删除')
				  });
			},
			// 跳转订单详情页
			orderDetaile(no) {
				console.log('订单')
				console.log(no)
				this.$router.push({
					name: 'orderdetails',
					params: {
						id: no
					}
				})
			},
			pingj() {
				this.$router.push({
					name: 'comment'
				})
			},
			showPopup() {
				this.show = true;
			},

			// 更新评价
			fabiao() {
			for (let i = 0; i < this.pingjieArr.length; i++) {
				this.$get(this.$API.COMMENTS_UPDATE, {
					userId: this.$store.state.nameId.userid,
					content: this.message,
					stars: this.value,
					productId:this.pingjieArr[i].product_id,
					contentId: this.xgId

				}).then(res => {
					if (res.status == 200) {
						Toast.success({
							message: '评价修改成功',
							duration: 700
						
						});
						this.$router.go(0)
					}
				}).catch(err => {
					Toast.fail({
						message: '评价删除失败',
						duration: 700
					});
				})
			}
			},
			// 删除评价
			delpl(ids, index) {
				console.log(ids)
				Dialog.confirm({
						title: '删除评价',
						message: '确定要删除该评价吗?',
					}).then(() => {
						for (let i = 0; i < this.pingjieArr.length; i++) {
							if (this.pingjieArr[i].id == ids) {
								this.$axios.get('http://116.63.80.218/comments/del', {
									params: {
										userId: this.$store.state.nameId.userid,
										contentId:this.pingjieArr[i].id
									}
								}).then(res => {
									// console.log(res)
									if (res.status == 200) {
										console.log(this.pingjieArr[i].id)
										console.log(index)
										this.pingjieArr.splice(index, 1)
										Toast.success({
											message: '评价删除成功',
											duration: 500
										});
									} else {
										Toast.fail({
											message: '评价删除失败',
											duration: 500
										});
									}

								})
							} else {
								console.log('数据请求失败')
							}

						}
					})
					.catch(() => {
						console.log('取消删除')
					});

				// this.delID=ids
			},
			// 取到要修改评论的数据
			xiugai(id) {
				this.showPopup()
				this.xgId = id
				console.log('修改')
				for (let i = 0; i < this.pingjieArr.length; i++) {
					// console.log(this.pingjieArr[i])
					if (this.pingjieArr[i].id == id) {
						this.message = this.pingjieArr[i].content
						this.value = this.pingjieArr[i].stars
					}
				}
			},
			// 请求评价数据
			getpingjie() {
				// 请求商品详情
				this.$get(this.$API.PRODUCTS_LIST).then(res=>{
					console.log(res)
						for(let i=0;i<res.data.length;i++){
						     // 请求用户评价
							 this.$get(this.$API.COMMENTS_INDEX, {
							 	userId: this.$store.state.nameId.userid,
							 	productId:res.data[i].id
							 }).then(rest => {
								 // console.log(rest.data)
								 let img=''
							 	for (let j= 0; j < rest.data.length; j++) {
									console.log(rest.data[j])
									if(res.data[i].id==rest.data[j].product_id){
									    console.log(res.data[j])
											img=res.data[i].image
									}
									console.log(img)
							 		this.pingjieArr.push({
										img:img,
										id:rest.data[j].id,
										stars:rest.data[j].stars,
										audit:rest.data[j].audit,
										product_id:rest.data[j].product_id,
										content:rest.data[j].content,
										
									})
							 	}
							console.log(this.pingjieArr)
							 }).catch(err => {
							 	console.log(err)
							 })
						} 
					
				}).catch(err=>{
					console.log(err)
				})
				
				
			
			}



		},
		components: {
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[Panel.name]: Panel,
			[Button.name]: Button,
			[SwipeCell.name]: SwipeCell,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Card.name]: Card,
			[Dialog.name]: Dialog,
			[Rate.name]: Rate,
			[Popup.name]: Popup,
			[Field.name]: Field,
			[Uploader.name]: Uploader,
			[Toast.name]: Toast,

			TabBar,
			TabBarItem
		}
	}
</script>
<style lang="less" scoped>
	@width: 100vw;
	@display: flex;
	@margin: 0 auto;
	@wid90: 90vw;
	@padding: 0 17px;

	.My {
		width: @width;
		height: 100vw;
		background-color: #F9F9F9;
	}

	.header {
		width: @width;
		height: 13vw;
		background: #ffffff;
		display: @display;
		box-shadow: -1px 0px 0.5px #999999;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;


	}

	.header-logo {
		width: @width;
		height: 15vw;
		display: @display;
		align-items: center;
		justify-content: center;
	}

	.header-logo>img {
		width: 80px;
		height: 8vw;

	}

	.biaoq {
		margin-top: 45px;
		padding-bottom: 100px;

		/deep/.van-cell {
			background-color: #F9F9F9;
			border: none;
		}

		.goods-card {
			margin: 0;
			background-color: white;
			position: relative;
		}

		.delete-button {
			height: 100%;
		}

		.titles {
			width: 200px;
			// border: 1px solid;
		}

		.numShul {
			position: absolute;
			top: 30%;
			right: 10px;
			z-index: 99;
			font-size: 14px;
			color: #999999;
		}
	}

	.dingdansp {
		height: 30px;
		display: flex;
		justify-content: space-between;
		padding: @padding;
		box-sizing: border-box;
		align-items: center;
		font-weight: bold;
		font-size: 14px;
	}

	.footer {
		text-align: right;
		height: 50px;
		line-height: 40px;
	}

	// 我的评价
	.goods-card {
		margin: 0;
		background-color: white;

		.desc {
			width: 260px;
			font-size: 13px;
			padding: 0px 10px 0px 0px;
			box-sizing: border-box;
			table-layout: fixed;
			word-wrap: break-all;
			word-break: normal;
			overflow: hidden;
		}
	}

	.delete-button {
		height: 100%;
	}

	// 弹窗
	.shouchang {
		margin-top: 10px;
		display: flex;
		height: 120px;

		.iconImg {
			width: 110px;
			margin-right: 20px;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.biaot {
			height: 110px;
			font-size: 15px;
			font-weight: bold;

			.btn {
				height: 30px;
				position: absolute;
				right: 20px;
				bottom: 20px;
			}

			.btn2 {
				height: 30px;
				position: absolute;
				right: 100px;
				bottom: 20px;
			}
		}
	}

	.pingjbxo {
		width: 100vw;
		height: 70vw;
		background-color: white;
		padding: 0 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		justify-content: center;

		.header-ms {
			height: 40px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;

		}

		.jianj {
			height: 100px;
			border: 1px solid #f7f7f7;
			margin-bottom: 15px;
		}

		.tupian {
			height: 90px;

		}
	}

	.kuijiBtn {
		width: 70vw;
		margin: 30px auto;
	}
</style>
